<template>
  <el-dialog :close-on-click-modal="false" title="宝贝状态" :visible.sync="visible" width="32.5%" :before-close="handleClose">
    <div class="tip">可设置您的宝贝状态</div>
    <div class="shopModal">
      <span>
        宝贝状态:
      </span>
      <el-radio-group v-model="statu">
        <el-radio :label="1">上架宝贝</el-radio>
        <el-radio :label="2">下架宝贝</el-radio>
      </el-radio-group>
    </div>
    <template #footer>
      <div class="buttons">
        <el-button type="primary" @click="hadnleChangeStatu">确 定</el-button>
        <el-button plain @click="handleClose">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex';
export default {
  name: '',
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    good: {
      type: Object
    },
  },
  data () {
    return {
      statu: this.good.goods_status
    };
  },
  methods: {
    ...mapMutations(['changeStatu']),
    ...mapActions(['fetchGoodsUpshelf', 'fetchGoodsDownshelf']),
    handleClose () {
      this.$emit('close');
    },
    hadnleChangeStatu () {
      if(this.statu === 1){
        this.fetchGoodsUpshelf({ goods_id: this.good.goods_id });
        this.changeStatu(1);
        this.handleClose();
      }else if(this.statu === 2){
        this.fetchGoodsDownshelf({ goods_id: this.good.goods_id });
        this.changeStatu(2);
        this.handleClose();
      }
    }
  },
}
</script>
<style lang='scss' scoped>
.tip {
  font-size: 15px;
}
.shopModal {
  padding: 30px 0;
  text-align: center;
  span {
    margin-right: 15px;
  }
}
.buttons {
  float: right;
  display: flex;

  button {
    width: 100px;
  }
}
</style>